<template>
  <div class="card p-3 mt-3 bg-white">
    <div
      class="card-header d-flex ai-center"
      :class="{ 'border-bottom': !none , 'pb-3': !none }"
    >
      <i class="iconfont" :class="`icon-${icon}`"></i>
      <div class="fs-lg flex-1 px-2">
        <strong class="fs-xl" v-if="none">{{ title }}</strong>
        <span v-else>{{ title }}</span>
      </div>
      <i class="iconfont icon-menu" v-if="!none"></i>
    </div>

    <!-- body 导航 -->
    <div class="card-body pt-3">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: { type: String, required: true },
    icon: { type: String, required: true },
    none: { type: Boolean },
  },
  data(){
    return{
      active:0,
    }
  }
};
</script>

<style lang="scss">
@import "../assets/scss/_variable.scss";
.card {
  border-bottom: 1px solid $border-color;
}
</style>